<template>
  <div>

    <el-container style="height: 600px; border: 1px solid #eee">
      <el-aside width="200px" style="background-color: white">
        <el-menu :default-openeds="['1']">

          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-postcard"></i>信息修改
            </template>
            <el-menu-item-group>

              <router-link class="alink" to="/showinfo">
                <el-menu-item index="1-1">
                  基本信息
                </el-menu-item>

              </router-link>

              <router-link class="alink" to="/infoeditor">
                <el-menu-item index="1-2">
                  信息修改
                </el-menu-item>
              </router-link>

              <router-link class="alink" to="/imageUp">
                <el-menu-item index="1-3">
                  头像修改
                </el-menu-item>
              </router-link>

              <router-link class="alink" to="/countcontrol">
                <el-menu-item index="1-4">
                  账号管理
                </el-menu-item>
              </router-link>


            </el-menu-item-group>

          </el-submenu>


          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-postcard"></i>文章管理
            </template>
            <el-menu-item-group>
              <router-link class="alink" to="/articlecontrol">
                <el-menu-item index="2-1">
                  文章管理
                </el-menu-item>
              </router-link>

            </el-menu-item-group>

          </el-submenu>


          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-edit"></i>文章书写
            </template>
            <el-menu-item-group>
              <router-link class="alink" to="/writearticle">
                <el-menu-item index="3-1">
                  文章书写
                </el-menu-item>
              </router-link>
            </el-menu-item-group>

          </el-submenu>
          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-user"></i>关注的人
            </template>
            <el-menu-item-group>
              <router-link class="alink" to="/checkFollow">
                <el-menu-item index="3-1">
                  关注的人
                </el-menu-item>
              </router-link>
            </el-menu-item-group>

          </el-submenu>


        </el-menu>
      </el-aside>


      <div style="width: 80%;margin: 0 auto">
        <div v-if=haveUser style="text-align: center">还没有关注人哦，请关注之后再来看看吧</div>
        <el-card shadow="hover" v-for="(item) in user" style="margin: 50px">
          <div style="float: left;">
            <span><img style="width:70px;height:70px; margin:0 20px 0 0;border-radius: 50%" :src="item.avatarUrl" ></span></div>
          <div><span><el-link style="margin:20px 0 10px 0;font-size: 20px" type="primary" @click.native="toUser(item.id)">{{ item.username }}
              </el-link></span></div>
          <div style="text-align: right">文章数：{{ item.articleNum }}</div>
        </el-card>
      </div>


    </el-container>

  </div>

</template>

<script>
import user from "@/store/user";

export default {
  name: "checkFollow",
  data() {
    return {
      user: [],
      haveUser: false
    }
  },
  created() {
    this.haveUser = false
    this.getFollow()
  },
  methods: {
    toUser(id) {
      this.$router.push({path: '/userPage', query: {userID: id}})
    },
    getFollow: function () {
      const userInfo = user.getters.getUser(user.state());
      var userid;
      if (userInfo === null) {
        this.$message.warning("请先登录")
        this.$router.push({path: '/login'})
      }
      else userid = userInfo.user.userID;
      this.$axios({
        method: 'post',
        url: '/user/myFollow',
        data: ({
          userID:userid
        })
      })
          .then(res => {
            this.user = res.data.data
            if (this.user.length === 0)
              this.haveUser = true;
          })
          .catch(err => {
            this.haveUser = true;
            console.log(err);         /* 若出现异常则在终端输出相关信息 */
          })
    }
  }
}
</script>

<style scoped>

</style>
